@use "sass:color";
@use "@sass-palette/hope-config";
@use "vuepress-shared/styles/svg";

// hint icon
$hint-icon: '<svg viewBox="0 0 12 16"><path fill="#003100" fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"/></svg>';
$hint-dark-icon: '<svg viewBox="0 0 12 16"><path fill="#e6f6e6" fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"/></svg>';

:root {
  // hint
  --hint-title-color: #003100;
  --hint-bg-color: #e6f6e6;
  --hint-border-color: #009400;
}

#{hope-config.$dark-selector} {
  // hint
  --hint-title-color: #e6f6e6;
  --hint-bg-color: #003100;
}

.custom-container.hint {
  position: relative;
  transition:
    background var(--color-transition),
    border-color var(--color-transition),
    color var(--color-transition);
  margin: 1rem 0;
  padding: 0.25rem 1rem;
  border-left-width: 0.3rem;
  border-left-style: solid;
  border-radius: 0.5rem;

  color: inherit;
  border-color: var(--hint-border-color);
  background: var(--hint-bg-color);

  @media print {
    page-break-inside: avoid;
  }

  .custom-container-title {
    position: relative;
    font-weight: 600;
    line-height: 1.25;
    color: var(--hint-title-color);

    padding-left: 1.5rem;

    @media print {
      padding-left: 0;
    }

    &::before {
      @include svg.background-svg($hint-icon);

      #{hope-config.$dark-selector} & {
        @include svg.background-svg($hint-dark-icon);
      }

      content: " ";

      position: absolute;
      left: 0;

      width: 20px;
      height: 20px;

      background-position: left;
      background-repeat: no-repeat;

      @media print {
        display: none;
      }
    }
  }

  p {
    line-height: 1.5;
  }

  a {
    color: var(--c-brand, #3eaf7c);
  }
}
